<script lang='ts' setup>
import TitleBar from '@/components/标题.vue'
import { getPicture } from '@/assets/工具/工具类';

</script>

<template>
    <div class="组件根元素">
        <TitleBar title="摄影详情"/>
        <div class="Profile">
            <div class="PhotographyCustomization"><img :src="getPicture('校园/摄影定制1.png')" alt=""></div>
            <p class="ProfileSpan">个性化定制</p>
            <p class="PictureText">我们提供完全个性化的拍摄方案，根据您的需求和喜好量身定制拍摄主题和风格。</p>
            <div class="OnlineReservation">在线预约</div>
        </div>
  
    </div>
</template>

<style scoped>
.OnlineReservation{
    width: 150px;
   line-height: 50px;
    background-color: rgba(120, 78, 35, 1);
    color: rgba(255, 255, 255, 1);
    margin: auto;
    text-align: center;
    border-radius: 50px;
}
.ProfileSpan{
    font-size: 20px;
    color: rgba(116, 78, 43, 1);
    font-weight: bold;
}
.PictureText{
    font-size: 16px;
}

.Profile{
    width: 343px;
    margin: auto;
}
.PhotographyCustomization, img{
    width: 343px;
    height: 529px;
    margin: auto;
}

</style>
